<template>
  <div>
    <!--商业流向审批-->
    <el-form :inline="true" label-position="right" size="small" class="filter-form-inline">
      <el-row :gutter="40" style="margin-left: 0px;margin-right:0px;">
        <el-col :span="8">
          <el-form-item label="流程编号：" style="width: 100%;">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：" style="width: 100%;">
            {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：" style="width: 100%;">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="businessFlowType === '1' ? '配送商名称：' :'代理商名称：'" style="width: 100%;">
            {{businessFlowType === '1' ? detailData?.data?.businessFlow?.distributeName : detailData?.data?.businessFlow?.agentName}}
          </el-form-item>
        </el-col>
        <el-col>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="businessFlowType === '1' ?'原始流向数据':'流向数据明细'" name="1">
              <originalDetail :table-data="tableData" :businessFlowType="businessFlowType" />
            </el-tab-pane>
            <el-tab-pane label="流向核算数据" name="2" v-if="businessFlowType === '1'">
              <flowDetails :form-data="detailData.data" :table-data="tableData" />
            </el-tab-pane>
          </el-tabs>
        </el-col>

      </el-row>
    </el-form>
  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs, watch,} from "vue";

export default {
  name: "Index",
  props: {
    detailData: {
      type: Object,
      default: {
        data: {},
      },
    },
  },
  components: {
    flowDetails: defineAsyncComponent((_) =>
      import("../../../../businessFlow/flowImport/modules/flowDetails.vue")
    ),
    originalDetail: defineAsyncComponent((_) =>
      import("../../../../businessFlow/flowImport/modules/originalDetail.vue")
    ),
  },
  setup(props) {
    var data = reactive({
      detailData: {},
      activeName: "1",
      tableData: [],
      id: 0,
      businessFlowType: "1",
    });
    const api = inject("api");
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval;
          data.id = data.detailData.data?.businessFlow?.id;
          if (data.id !== undefined && data.id !== 0) {
            handlList(1, data.id);
          }
          data.businessFlowType =
            data.detailData.data?.businessFlow?.businessFlowType;
          console.log(data.detailData.data?.businessFlow?.businessFlowType, "---------------");
          console.log(data.detailData.data, "---------------");
        }
      },
      { immediate: true, deep: true }
    );

    const handleClick = (val) => {
      data.activeName = val.props.name;
      if (data.activeName === "1") {
        handlList(1, data.id);
      }
      if (data.activeName === "2") {
        handlList(2, data.id);
      }
    };

    const handlList = (type, id) => {
      const dataList = {
        id: Number(id),
        type: type,
      };
      api.businessFlow.TBUSINESSFLOW_DETAIL_LIST(dataList).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list;
        }
      });
    };

    onMounted((_) => {
      if (data.id !== undefined && data.id !== 0) {
        // handlList(1, data.id)
      }
    });

    return {
      ...toRefs(data),
      handleClick,
      handlList,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
